<template>
  <div class="personalHome">
    <Personal-Header bgColor="#5741d9"></Personal-Header>
    <Personal-Side></Personal-Side>
    <div class="content el-container is-vertical">
      <h2 class="pagetitle">{{$t('l.personal_1')}}</h2>
      <div class="personCon el-main">
        <div class="personinfo">
          <img class="userlogo" :class="{'marginLeft0': isMobile}" :src="userinfo.pic" v-if="userinfo.pic" />
          <img class="userlogo" :class="{'marginLeft0': isMobile}" v-else src="../assets/images/userlogo.png" />
          <div class="introcon" :class="{'width200': isMobile}">
            <p>
              {{$t('l.personal_2')}}：
              <span v-if="userinfo.userName">{{userinfo.userName}}</span>
              <span v-else>{{userinfo.cellPhone?userinfo.cellPhone:userinfo.email}}</span>
              <span class="">
                <img src="../assets/images/level.png" />
                <a v-if="userinfo.idType!==1">{{userinfo.verifiedLevel?'C'+userinfo.verifiedLevel+$t('l.personal_3'):$t('l.personal_4')}}</a>
                <a v-else-if="userinfo.idType==1 && userinfo.verifiedLevel">{{userinfo.verifiedLevel>2?$t('l.add_12'):$t('l.add_6')}}</a>
                <a v-else>{{$t('l.personal_4')}}</a>
              </span>
              <span v-if="userinfo.verifiedLevel!==0" class="realVerified"><i></i>{{$t('l.header_14')}}</span>
              <span v-else class="notrealVerified"><i></i>{{$t('l.header_15')}}</span>
            </p>
            <p>{{$t('l.personal_5')}}：{{lastLoginTime}} IP: {{lastLoginIp}}</p>
          </div>
          <router-link to="myinfo" class="fr editbtn">{{$t('l.personal_6')}}</router-link>
        </div>
        <div class="assetscharts clearfix">
          <div class="chartpanel fl">
            <p class="paneltitle">{{$t('l.personal_7')}}</p>
            <v-chart
              style="width:100%;height:300px;position:relative;top:-40px;left:0px;"
              :options="polar"
              theme="customed"
              v-show="!assetval"
            />
            <p v-show="assetval" style="text-align:center;">
              <img src="../assets/images/example.png">
            </p>
          </div>
          <div class="chartpanel fr">
            <p class="paneltitle">{{$t('l.personal_8')}}</p>
            <v-chart
              style="width:100%;height:300px;position:relative;top:-40px;left:-100px;"
              :options="circle"
              theme="customed"
              v-show="!assetdis"
            />
            <p v-show="assetdis" style="text-align:center;">
              <img src="../assets/images/example1.png">
            </p>
          </div>
        </div>
        <div class="panelbar">
          <p class="paneltitle">{{$t('l.personal_9')}}</p>
          <table class="loginrecord">
            <thead>
              <tr>
                <th>{{$t('l.personal_10')}}</th>
                <th>{{$t('l.personal_11')}}</th>
                <th>{{$t('l.personal_12')}}</th>
                <th>{{$t('l.personal_13')}}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in loginLogList" :key="index">
                <td>{{item.loginArea}}</td>
                <td>{{item.loginTime}}</td>
                <td>{{item.ip}}</td>
                <td>{{item.loginDevice}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PersonalHeader from "../components/personalHeader";
import PersonalSide from "../components/personalSide";
import moment from "moment";
import { api } from "@/api/api";
import ECharts from "vue-echarts/components/ECharts";
// import 'echarts/theme/customed.js';
import '@/assets/js/customed.js'
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/component/legend";


export default {
  components: {
    PersonalHeader,
    PersonalSide,
    "v-chart": ECharts
  },
  computed: {
    isMobile() {
      return this.$store.state.im.isMobile;
    }
  },
  created() {
    if (!this.$store.state.usertoken) {
      this.$router.push({
        path: "/login"
      });
    }
  },
  data() {
    return {
      userinfo: "",
      loginLogList: [],
      lastLoginTime: "",
      lastLoginIp: "",
      assetdis:false,
      assetval:false,
      circledata:[],
      polar: {
        xAxis: {
          type: "category",
          boundaryGap: false,
          splitLine: {
            show: false,
            //areaStyle: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
          },
          axisLine: {
            show: false,
            lineStyle: {
              //color: "#F2F6FA"
            }
          },
          data: []
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
          min: 0,
          max: 900,
          axisLine: {
            lineStyle: {
              //color: "#F2F6FA"
            }
          },
          axisLabel: {
            margin: 2,
            formatter: function(value, index) {
              if (value >= 10000 && value < 10000000) {
                value = value.toFixed(2) / 10000 + "万";
              } else if (value >= 10000000) {
                value = value.toFixed(2) / 10000000 + "千万";
              }
              return value;
            }
          }
        },
         series: [{
              data: [],
              type: 'line',
              areaStyle: {}
          }],
          grid:{
              //borderColor:'#fff'
          },
          textStyle:{
              //color:'rgba(51,56,94,0.6)',
              fontSize:12
          },

      },
      circle: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          show: true,
          orient: "vertical",
          right:'right',
          top:'30%',
          data: ['微信访问','公众号访问']
        },
        color: ["#4DA1FF", "#FF6E4B", "#42E9E1", "#FFAF4D", "#924BFF"],
        series: [
          {
            name: this.$t('l.add_82'),
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
    };
  },
  methods: {
    //基本信息
    async baseinfo() {
      let that = this;
      let res = await api.baseinfo({ gologin: true });
      if (res.data.code == 0) {
        that.userinfo = res.data.data.info;
      } else {
        that.$layer.msg(res.data.msg);
      }
    },
    //记录登录日志
    async getloginLogList() {
      let that = this;
      let res = await api.loginLogList();
      if (res.data.code == 0) {
        res.data.data.records.forEach((item, index) => {
          item.loginTime = moment(item.loginTime).format("YYYY-MM-DD HH:mm:ss");
          that.loginLogList.push(item);
        });
        that.lastLoginTime = moment(res.data.data.records[0].loginTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        that.lastLoginIp = res.data.data.records[0].ip;
      }
    },
    //资产变动
    async getassetValuation() {
      let that = this;
      let res = await api.assetValuation();
      if (res.data.code == 0) {
        if(res.data.data.length==1 && res.data.data[0].btcValuation==0){
          that.assetval = true
        }
        let arr = [];
        let datanum = 0;
        res.data.data.forEach((item, index) => {
          arr.push(item.btcValuation);
          datanum += item.btcValuation;
        });
        var max = Math.max.apply(null, arr);
        var min = Math.min.apply(null, arr);
        that.polar.yAxis.min = min;
        that.polar.yAxis.max = max;
        that.polar.series[0].data = arr;
        if(datanum==0){
          that.assetval = true
        }
      }
    },
    //资产分布
    async getassetDistribution() {
      let that = this;
      let res = await api.assetDistribution();
      if (res.data.code == 0) {
        if(res.data.data.length==0){
          that.assetdis = true
        }
        // console.log(res.data.data);
        let arr = [];
        res.data.data.forEach((item, index) => {
          if (index >= 5) return;
          arr.push({
            value: item.btcValuation,
            name: item.code
          });
        });
        that.circledata = arr;
        that.circle.series[0].data = arr;
        let namearr = [];
        arr.forEach((item,index)=>{
          namearr.push(item.name);
        })
        that.circle.legend.data = namearr;
      }
    }
  },
  mounted() {
    this.baseinfo();
    this.getloginLogList();
    this.getassetValuation();
    this.getassetDistribution();
  }
};
</script>
<style lang="less" scoped>
.marginLeft0 {
  margin-left: 10px!important;
  margin-top: 5px!important;
}
.width200 {
  width: 200px!important;
  margin-top: 5px!important;
  margin-left: 10px!important;
}
.personalHome {
  padding-top: 100px;

  .personCon {
    padding: 24px 30px;
    height: 90%;
    .panelbar {
      background: #fff;
      margin-top: 24px;
      border-radius: 4px;
      padding: 26px 40px;
      overflow-x: auto;

      .paneltitle {
        font-size: 16px;
        font-weight: 500;
        color: rgba(51, 56, 94, 1);
        line-height: 100%;
        border-left: 3px solid #2D8DFE;
        padding-left: 10px;
        margin-bottom: 18px;
        font-familyA: "PingFangSC-Medium";
      }
      .loginrecord {
        width: 100%;
        tr {
          border-bottom: 1px solid #f2f6fa;
        }
        th,
        td {
          text-align: left;
          height: 40px;
          font-size: 14px;
          color: rgba(51, 56, 94, 1);
          padding-left: 50px;
          white-space: normal;
        }
      }
    }
    .assetscharts {
      padding: 24px 0;
      .chartlegent{
        position:absolute;
        right:20%;
        top:85px;
        p{
          font-size:14px;
          color:#33385E;
          line-height:19px;
          font-familyA:OpenSans;
          margin-bottom:15px;
          i{
            display:inline-block;
            vertical-align:middle;
            width:9px;
            height:9px;
            margin-right:6px;
            margin-top: -2px;
            &.DAFF{
              background:#4DA1FF;
            }
            &.FFEB{
              background:#FF6E4B;
            }
            &.EE{
              background:#42E9E1;
            }
            &.FFAFD{
              background:#FFAF4D;
            }
            &.BFF{
              background:#924BFF;
            }
          }
        }
      }
      .chartpanel {
        background: #fff;
        border-radius: 4px;
        height: 300px;
        width: 48%;
        padding: 26px 40px;
        box-sizing: border-box;
        position:relative;
        .paneltitle {
          font-size: 16px;
          font-weight: 500;
          color: #33385e;
          line-height: 100%;
          border-left: 3px solid #2D8DFE;
          padding-left: 10px;
          margin-bottom: 18px;
          font-familyA: "PingFangSC-Medium";
        }
      }
    }
    .personinfo {
      height: 91px;
      background: #fff;
      .editbtn {
        width: 90px;
        height: 34px;
        border-radius: 20px;
        border: 1px solid #2D8DFE;
        line-height: 34px;
        text-align: center;
        color: #2D8DFE;
        font-size: 16px;
        margin-top: 30px;
        margin-right: 42px;
        cursor: pointer;
      }
      .userlogo {
        display: inline-block;
        vertical-align: middle;
        width: 60px;
        height: 60px;
        margin-top: 17px;
        margin-left: 40px;
        border-radius: 50%;
      }
      .introcon {
        display: inline-block;
        vertical-align: middle;
        margin-left: 20px;
        margin-top: 25px;
        p {
          font-size: 14px;
          font-weight: 400;
          color: rgba(51, 56, 94, 1);
          line-height: 20px;
          padding-bottom: 4px;
          span img {
            padding-right: 5px;
          }
        }
      }
    }
  }
}
</style>
